//获取单个元素
function getElem(selector) {
	return document.querySelector(selector);
}
//获取所有的元素
function getAllElem(selector) {
	return document.querySelectorAll(selector);
}
//获取元素class
function getCls(element) {
	return element.getAttribute('class');
}
//设置元素class
function setCls(element,cls) {
	return element.setAttribute('class',cls);
}
//为元素添加class
function addCls(element,cls) {
	var baseCls = getCls(element); //获取元素原有的class
	//如果元素没有cls类，则添加
	if(baseCls.indexOf(cls) === -1) {
		setCls(element,baseCls+' '+cls);
	}
	return;
}
//删除元素的某个class
function delCls(element,cls) {
	var baseCls = getCls(element); //获取元素原有的class
	//如果元素含有指定的cls，则删除cls
	if(baseCls.indexOf(cls) > -1) {
		setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '))
	}
	return;
}
/**
 * 封装通用事件方法（兼容IE）
 * 绑定事件的DOM元素：element
 * 事件名：type
 * 事件处理程序：handler
 */
function addHandler(element,type,handler) {
	/**
	 * 支持addEventListener
	 * 非IE浏览器
	 */
	if(element.addEventListener) {
		element.addEventListener(type,handler,true);
	}else if(element.attachEvent) {
		// 支持DOM2级的IE浏览器
		element.attachEvent("on"+type,handler);
	}else {
		// 不支持DOM2级的IE浏览器
		element["on"+type] = handler;
	}
}


//所有拥有动画的元素
var screenAnimateElements = {
	'.screen-1': [
		'.screen-1__head',
		'.screen-1__sub-head'
	],
	'.screen-2': [
		'.screen-2__head',
		'.screen-2__sub-head',
		'.screen-2__bg-1',
		'.screen-2__bg-2',
		'.screen-2__border'
	],
	'.screen-3': [
		'.screen-3__head',
		'.screen-3__sub-head',
		'.screen-3__bg',
		'.screen-3__features',
		'.screen-3__border'
	],
	'.screen-4': [
		'.screen-4__head',
		'.screen-4__sub-head',
		'.screen-4__border',
		'.screen-4__environment-item1',
		'.screen-4__environment-item2',
		'.screen-4__environment-item3',
		'.screen-4__environment-item4'
	],
	'.screen-5': [
		'.screen-5__head',
		'.screen-5__sub-head',
		'.screen-5__bg',
		'.screen-5__border'
	]
}
//动画初始化方法
function setAnimateInit(screenCls) {
	var screen = getElem(screenCls); //获取当前屏
	var animateElementsCls = screenAnimateElements[screenCls]; //需要设置动画的元素的class
	//为所有需要设置动画的元素添加init动画
	for(var i=0;i<animateElementsCls.length;i++) {
		var element = getElem(animateElementsCls[i]);//获取要添加动画的元素
		addCls(element,animateElementsCls[i].substr(1)+'_animate-init')
	}
}
//播放动画方法
function setAnimateDone(screenCls) {
	var screen = getElem(screenCls); //获取当前屏
	var animateElementsCls = screenAnimateElements[screenCls]; //需要设置动画的元素的class
	//为所有需要设置动画的元素添加done动画
	for(var i=0;i<animateElementsCls.length;i++) {
		var element = getElem(animateElementsCls[i]);//获取要添加动画的元素
		console.log("element")
		console.log(element)
		delCls(element,animateElementsCls[i].substr(1)+'_animate-init')
		addCls(element,animateElementsCls[i].substr(1)+'_animate-done')
	}
}



// 第一步,页面元素加载完后初始化
window.onload = function(){
	for(k in screenAnimateElements) {
		//默认播放第一屏动画-1
		if(k === '.screen-1') {
			continue;
		}
		setAnimateInit(k)
	}
}
//默认播放第一屏动画-2
setTimeout(function(){
	setAnimateDone('.screen-1')
},2000)
	

//第二步，滚动条相关动画
window.onscroll = function() {
	//获取当前页面的滚动条纵坐标位置
	var top = document.documentElement.scrollTop;
	
	if(top>80) {
		//导航条
		addCls(getElem('.header'),'header_status_white');
		//大纲
		addCls(getElem('.outline'),'outline_status_in');
	}else {
		delCls(getElem('.header'),'header_status_white');
		delCls(getElem('.outline'),'outline_status_in');
	}

	switchNavItemActive(0)
	//第一屏
	if(top>1) {
		setAnimateDone('.screen-1');
	}
	//第二屏
	if(top>(640*1)-120) {
		setAnimateDone('.screen-2')
		switchNavItemActive(1)
	}
	//第三屏
	if(top>(640*2)-120) {
		setAnimateDone('.screen-3')
		switchNavItemActive(2)
	}
	//第四屏
	if(top>(640*3)-120) {
		setAnimateDone('.screen-4')
		switchNavItemActive(3)
	}
	//第五屏
	if(top>(640*4)-120) {
		setAnimateDone('.screen-5')
		switchNavItemActive(4)
	}
}

//第三步，导航条、大纲双向定位
var headNav = getAllElem('.header__menu-item');
var outlineNav = getAllElem('.outline__item');

//导航跳转方法
function setNavJump(i,nav) {
	var item = nav[i]; // 得到对应元素
	//顶部导航的点击事件
	addHandler(item,'click',function(){
		//设置滚动条位置
		document.documentElement.scrollTop = i*640;
	})
}
//选中状态方法
function switchNavItemActive(index) {
	for(var i=0;i<headNav.length;i++) {
		//删除顶部的选中状态
		delCls(headNav[i],'header__menu-item_active');
		navTip.style.left = 0;
	}
	//为当前元素添加选中状态
	addCls(headNav[index],'header__menu-item_active');
	navTip.style.left = ( index * 115 )+'px';

	for(var i=0;i<outlineNav.length;i++) {
		delCls(outlineNav[i],'outline__item_active')
	}
	addCls(outlineNav[index],'outline__item_active')
}
for(var i=0;i<headNav.length;i++) {
	//顶部导航的事件
	setNavJump(i,headNav)
}
for(var i=0;i<outlineNav.length;i++) {
	//大纲的事件
	setNavJump(i,outlineNav)
}

/**
 * 第四步，滑动特效
 * 顶部导航，鼠标滑动时下划线随之滑动，未点击鼠标划出时下划线恢复到默认位置
 */
var navTip = getElem('.header__nav-tip');
function setTip(index,nav) {
	//鼠标划入
	addHandler(nav[index],'mouseover',function(){
		navTip.style.left = (index*115)+'px';
	})
	// 鼠标移出
	var activeIdx = 0;
	addHandler(nav[index],'mouseout',function(){
		for(var i=0;i<nav.length;i++) {
			if(getCls(nav[i]).indexOf('header__menu-item_active')>-1) {
				activeIdx = i;
				break; //结束循环
				/*continue; //结束本次循环*/
			}
		}
		navTip.style.left = (activeIdx*115)+'px';
	})
}
for(var i=0;i<headNav.length;i++) {
	setTip(i,headNav);
}





//点击继续学习按钮
var studyBtn = getElem('.go-on-study__btn');
addHandler(studyBtn,'click',function(){
	document.documentElement.scrollTop=0;
})